<template>
  <div class="page">
    <div class="content">
      <template v-if="!tips">
        <DesignContent
          :style="{}"
          :questionaire="questionaire"
          :contentList="contentList"
          :examList="questList"
          :type="type"
          :edit="false"
        />
      </template>

      <template v-else>
        <h2>{{ tips }}</h2>
      </template>
    </div>
  </div>
</template>
<script lang="ts">
import { useQuestTypeChoseStore } from '@/store/create';
import { useDesignSliderStore } from '@/store/design';
import { QuestsType } from '@/store/design/types';
import { useAnalysisStore, useSettingBasicStore } from '@/store/setting';
import DesignContent from '@/views/design/DesignContent.vue';
import { computed, defineComponent, watchEffect } from 'vue';

export default defineComponent({
  components: { DesignContent },
  setup() {
    const analysisState = useAnalysisStore();
    const basic = useSettingBasicStore();
    const sliderStore = useDesignSliderStore();
    const useTypeStore = useQuestTypeChoseStore();

    const queId = computed(() => basic.queId);
    // analysisState.getResult(queId.value);

    watchEffect(() => {
      analysisState.reSetTips();
      analysisState.getResult(queId.value);
    });

    const questionaire = computed(() => analysisState.questionaire);
    const contentList = computed(() => analysisState.content);
    const questList = computed<QuestsType[]>(() => sliderStore.getQueryList);

    const type = computed<number>(() => useTypeStore.selectType.id);

    const tips = computed(() => analysisState.tips);
    return { questionaire, questList, contentList, type, tips };
  },
});
</script>
<style lang="less" scoped>
.page {
  width: 100%;
  height: calc(100vh - 70px);
  overflow-x: hidden;
  overflow-y: scroll;
  display: flex;
  justify-content: center;
  .content {
    width: 846px;
    display: flex;
    flex-direction: column;
    padding: 24px 0;
    background-color: white;
    border-radius: 8px;
    margin: 24px;
    padding: 24px;
    height: fit-content;
    // display: flex;
    // justify-content: center;
    // align-items: center;
    h2 {
      text-align: center;
    }
  }
}
</style>
